<template>
    <div class="hn-base-page-body">
        <div class="header-div">
            <div class="header-logo"></div>
            <div class="right-div fn-clear">
                <i class="close-icon" @click="returnHome"></i>
                <div class="cut-line"></div>
                <p class="user-style">{{userName}}，您好！</p>
            </div>
        </div>

        <div class="substance-div">
            <div class="menu-div">
                <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" active-text-color="#3691FF" text-color="#333333" :default-openeds="defaultOpens"  @open="handleOpen" @close="handleClose">
                    <el-submenu class="menu-style" :class="[chooseMenuIndex === item.index ? 'choose-menu-style' : '']" v-for="(item, index) in menuList" :key="index" :index="item.index">
                        <template slot="title">
                            <i class="icon-style"></i>
                            <span>{{item.title}}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(item1, index) in item.menuGropList" :key="index" :index="item1.index" >
                                <template slot="title">
                                    <i class="grop-icon-style" :class="[chooseMenuGropIndex === item1.index ? 'choose-grop-icon-style' : '']"></i>
                                    <span>{{item1.title}}</span>
                                </template>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </div>

            <!--路由跳转的页面-->
			<router-view class="content-div"></router-view>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            userName: '管理员',
            defaultOpens: ["1", "2", "3"],
            defaultActive: '1-1',
            menuList: [
                // {
                //     index: '1',
                //     title: '物联网',
                //     menuGropList: [],
                // },
                {
                    index: '1',
                    title: '视联网',
                    menuGropList: [
                        {
                            index: '1-1',
                            title: '视联网设备管理',
                        },
                        {
                            index: '1-2',
                            title: '视联网设备管控',
                        },
                        {
                            index: '1-3',
                            title: '设备点位管理',
                        },
                        {
                            index: '1-4',
                            title: '设备模版管理',
                        },
                    ],
                },
                {
                    index: '2',
                    title: '遥感监测',
                    menuGropList: [
                         {
                            index: '2-1',
                            title: '作物识别',
                        },
                        {
                            index: '2-2',
                            title: '适应性分析',
                        },
                        {
                            index: '2-3',
                            title: '产量预测',
                        },
                    ],
                },
                {
                    index: '3',
                    title: '数据中台',
                    menuGropList: [
                        {
                            index: '3-1',
                            title: '数据采集',
                        },
                        {
                            index: '3-2',
                            title: '数据治理',
                        },
                        {
                            index: '3-3',
                            title: '数据管理',
                        },
                        {
                            index: '3-4',
                            title: '计算分析',
                        },
                    ],
                },
            ],
            chooseMenuIndex: '1',
            chooseMenuGropIndex: '1-1',
        }
    },

    mounted() {

    },

    methods: {
        returnHome() {
            this.$router.push({ path: "/homePage" });
        },
    }
}
</script>

<style lang="scss" scoped>
.hn-base-page-body {
    width: 100%;
    height: 100vh;

    .header-div {
        width: 100%;
        height: 7.8193%;
        background: url(../assets/images/hnfwglxt/header-bg.png) no-repeat;
        background-size: 100% 100%;
        position: relative;

        .header-logo {
            width: 21.04166666%;
            height: 75.55555%;
            background: url(../assets/images/hnfwglxt/header-logo1.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 2.39708%;
        }

        .right-div {
            width: 50%;
            height: .6rem;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0.93798854%;

            .user-style {
                float: right;
                height: 100%;
                font-size: .475rem;
                font-weight: normal;
                color: #ffffff;
                font-family: 'SourceHanSansCN-Normal';
                line-height: .6rem;
            }

            .cut-line {
                float: right;
                width: .025rem;
                height: 100%;
                background: #ffffff;
                margin: 0 1% 0 .5%;
            }

            .close-icon {
                float: right;
                width: .575rem;
                height: 100%;
                background: url(../assets/images/hnfwglxt/close-icon.png) no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }
        }
    }

    .substance-div {
        width: 100%;
        height: 92.1807%;
        display: flex;
        justify-content: start;
        
        .menu-div {
            width: 13.131839%;
            height: 100%;
            background: #fff;
            box-shadow: 0 .075rem .125rem 0 rgba(0,0,0,0.50); 
            padding: .5% 0 1% 0;
            box-sizing: border-box;
            overflow: auto;

            .menu-style {

                &:nth-child(1) {

                    .icon-style {
                        display: inline-block;
                        width: .475rem;
                        height: .325rem;
                        background: url(../assets/images/hnfwglxt/icon11.png) no-repeat;
                        background-size: 100% 100%;
                        margin-right: 10%;
                        position: relative;
                        top: -.1rem;
                    }
                }

                &:nth-child(2) {

                    .icon-style {
                        display: inline-block;
                        width: .45rem;
                        height: .425rem;
                        background: url(../assets/images/hnfwglxt/icon9.png) no-repeat;
                        background-size: 100% 100%;
                        margin-right: 10%;
                    }
                }

                &:nth-child(3) {

                    .icon-style {
                        display: inline-block;
                        width: .475rem;
                        height: .45rem;
                        background: url(../assets/images/hnfwglxt/icon10.png) no-repeat;
                        background-size: 100% 100%;
                        margin-right: 10%;
                    }
                }

                .grop-icon-style {
                    display: inline-block;
                    width: .375rem;
                    height: .375rem;
                    background: url(../assets/images/hnfwglxt/icon5.png) no-repeat;
                    background-size: 100% 100%;
                    margin-right: 10%;
                }

                .choose-grop-icon-style {
                    background: url(../assets/images/hnfwglxt/icon6.png) no-repeat;
                    background-size: 100% 100%;
                }
            }

            .choose-menu-style {
                width: 100%;
                height: 100%;
                background: url(../assets/images/hnfwglxt/menu-bg.png) no-repeat;
                background-size: auto;

                /deep/.el-submenu__title {
                    color: #fff !important;
                }

                /deep/.el-submenu__title span{
                    position: relative;
                    top: -.1rem;
                }

                /deep/.el-submenu__title i {
                    color: #fff;
                }
            }

            /deep/.el-submenu__title {
                font-size: .5rem;
                font-weight: 400;
                text-align: left;
                font-family: 'SourceHanSansCN-Normal';
            }

            /deep/.el-submenu .el-menu-item {
                font-size: .45rem;
                font-weight: 700;
                font-family: 'SourceHanSansCN-Normal';
            }

            /deep/.el-menu-item-group__title {
                padding: 0 0 0 20px;
            }

            &::-webkit-scrollbar {
                width: 4px;
            }
            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                opacity: 0.2;
            }
            &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                border-radius: 0;
            }
        }

        .content-div {
            width: 86.868161%;
            height: 100%;
            background: #eef3fa;
        }
    }
}
</style>